<template>
  <div class="nav">
    <div class="nav_menu">
      <el-menu
        :default-active="aboutUsActiveIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <router-link to="/AboutUs/introduce">
          <el-menu-item index="1">基本介绍</el-menu-item>
        </router-link>
        <router-link to="/AboutUs/history">
          <el-menu-item index="2">发展历史</el-menu-item>
        </router-link>
        <router-link to="/AboutUs/team">
          <el-menu-item index="3">管理团队</el-menu-item>
        </router-link>
        <router-link to="/AboutUs/personal">
          <el-menu-item index="4">内容团队</el-menu-item>
        </router-link>
        <router-link to="/AboutUs/business">
          <el-menu-item index="5">业务介绍</el-menu-item>
        </router-link>
      </el-menu>
    </div>
  </div>
</template>

<script>
  export default {
    name: "aboutUsSideMenu",
    data(){
      return{
        // activeIndex:'1'
      }
    },
    computed:{
      aboutUsActiveIndex(){
        // console.log(this.$store.getters.activeIndexU)
        return this.$store.getters.activeIndexU
      }
    },
    methods:{
      // 点击aboutUs导航条
      handleSelect(key, keyPath) {
        // console.log(key, keyPath);
        this.$store.dispatch('changeAboutUsActiveIndexF',key)
      },
    }
  }
</script>

<style scoped lang="scss">
  .nav{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .nav_menu{
      width: 100%;
      padding: 0 !important;
      display: flex;
      justify-content: center;
      align-items: center;
      .el-menu.el-menu--horizontal{
        width: 100%;
        background-color:transparent;
        height: 90px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border: none;
        a{
          border: none;
          text-decoration: none;
          width: 8.33rem;
          height: 3.33rem;
          .el-menu-item{
            width: 100%;
            height: 100%;
            font-size: 1.25rem;
            padding:0;
            line-height: 3.33rem;
            border: none !important;
            color: #999999;
            font-weight: 400;
          }
          .el-menu-item:hover{
            color: #333333;
          }
          .el-menu-item:focus,.el-menu-item:hover,.el-menu-item:active{
            background-color: transparent;
          }
        }
        .router-link-active{
          background-image: linear-gradient(46deg,
            #1c97ff 1%,
            #0b89fe 100%),
          linear-gradient(
              #1279ff,
              #1279ff);
          background-blend-mode: normal,
          normal;
          border-radius: .5rem;
          .el-menu-item{
            border: none;
            background-color: transparent;
            position: relative;
            color: #ffffff;
        }
        }
        .router-link-active:hover{
          .el-menu-item{
            color: #ffffff;
          }
        }
      }
    }
  }
</style>
